<template>
  <div class="tunnel-list">
    <dynamic-list v-if="currData.list" ref="dl" :list="currData.list" :tmp="tmp" v-bind="innerProps">
      <template v-slot="{item}">
        <div class="g-flex">
          <div>
            <el-input size="mini" v-model="item.label" placeholder="名称"/>
          </div>
          <div>
            <el-input size="mini" v-model="item.value" placeholder="值"/>
          </div>
        </div>
      </template>
    </dynamic-list>

    <div style="text-align: center; margin-top: 30px">
      <el-button size="small" type="primary" @click="save">{{saveText}}</el-button>
    </div>c
  </div>
</template>

<script>
import dynamicList from '@/components/common/dynamic-list'

export default {
  name: 'tunnel-list',
  props: {
    data: Object,
    innerProps: Object,
    saveText: {
      type: String,
      default: '保存'
    }
  },
  components: {
    dynamicList
  },
  data() {
    return {
      currData: this.data,
      tmp: {label: '', value: ''}
    }
  },
  methods: {
    save() {
      const list = this.$refs.dl.getData()

      const data = {
        list
      }

      const json = JSON.stringify(data)
      this.$emit('change', json)
    }
  },
  watch: {
    data() {
      this.currData = this.data
    }
  }
}
</script>

<style lang="scss" scoped>
  .tunnel-list {
    width: 800px;
    margin: 20px auto;


    .g-flex {
      display: flex;
      width: 100%;

      & > div {
        width: 50%;
        padding: 0 10px;
      }
    }
  }
</style>
